<template>
  <baidu-map class="bm-view" center="郑州" :scroll-wheel-zoom="true">
    <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
    <bm-marker :position="{ lng: 113.666342, lat: 34.753084 }" :dragging="true" @dragend="mapDragend"
               :icon="{ url: 'http://developer.baidu.com/map/jsdemo/img/fox.gif', size: { width: 300, height: 157 } }"></bm-marker>
  </baidu-map>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {getAddressByPoints} from "vue-baidu-map-3x";

// const center = ref('郑州经贸学院')
// const lng = ref('113.719714')
// const lat = ref('34.615475')
/**
 * 拖拽结束触发的事件
 * @param event
 */
const mapDragend = (event: any) => {

  // console.log(event.point.lat)
  // console.log(event.point.lng)

  const config = {location: [event.point.lat, event.point.lng]};
  getAddressByPoints(config, ['FMYihQ2aXcKidOkniSS9hv68QcH7gskK']).then((res: any) => {
    // console.log(res.formatted_address)
  });
}

</script>

<style scoped>
.bm-view {
  width: 100%;
  height: 90%;
}
</style>

